package com.example.app.components


import androidx.compose.animation.*
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.app.R

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimationSample() {

    var visible by remember {
        mutableStateOf(false)
    }

    Column() {
        Button(onClick = {
            visible = !visible
        }) {
            Text(text = "button")
        }
        // AnimatedVisibility默认淡入淡出,由上而下
        // enter进入时动画,动画之间可以相加
        AnimatedVisibility(visible = visible) {
            Image(painter = painterResource(id = R.drawable.a), contentDescription = null)
        }
    }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimationSample1() {
    var num by remember {
        mutableStateOf(0)
    }
     Row() {
         Button(onClick = {
             num++
         }) {
             Text(text = "Button")
         }
         // targetState(目标状态)为初始状态值, 此处为num
         AnimatedContent(targetState = num) {
             // targetNum为num
                 targetNum ->
             Text(text = "count: $targetNum")

         }
         Text(text = "conunt: $num")
     }
}

@OptIn(ExperimentalAnimationApi::class)
@Preview
@Composable
fun AnimationSample1Preview() {
    var visible by remember {
        mutableStateOf(false)
    }
    Column {
        Button(onClick = {
            visible = !visible
        }) {
            Text(text = "Button")
        }
        // enter = EnterTransition.None 将初始动画设置为none
        AnimatedVisibility(visible = visible, enter = EnterTransition.None) {
            // 第二个组件的动画会在组件没出现之前就执行完毕,看不到效果
            Box(
                modifier = Modifier
                    .size(300.dp)
                    .background(color = Color.Red)
            ) {
                // tween 第一个参数为动画执行的时间(毫秒)
                // animateEnterExit 需要放在Modifier最前侧
                Box(
                    modifier = Modifier
                        .animateEnterExit(
                            enter = slideInVertically(animationSpec = tween(1000)),
                            exit = slideOutVertically()
                        )
                        .size(100.dp)
                        .background(Color.Green)
                        .align(Alignment.Center)
                ) {

                }
            }
        }
    }
}

@Preview(
    showSystemUi = true
)
@Composable
fun AnimationSamplePreview() {
    AnimationSample1()
}

